<!DOCTYPE HTML>
<html>

<head>
   <title>轮播列表</title>
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
   <link href="../../../assets/css/dpl-min.css" rel="stylesheet" type="text/css" />
   <link href="../../../assets/css/bui-min.css" rel="stylesheet" type="text/css" />
   <link href="../../../assets/css/page-min.css" rel="stylesheet" type="text/css" />
   <link href="../../../assets/css/jx-style.css" rel="stylesheet" type="text/css" />
   <link href="../../../assets/css/prettify.css" rel="stylesheet" type="text/css" />
</head>

<body class="dark-theme">
   <div class="container">
      <div class="detail-page  ">
         <div class="detail-page-title">
            <h4>轮播列表
               <button id="add-account-btn" class="jx-btn btn-default pull-right">新增轮播</button>
            </h4>
         </div>
         <div class="detail-section">
            <div class="detail-row">
               <div>
                  <div id="grid"></div>
                  <div></div>
                  <div></div>
               </div>
            </div>
            <!-- 表格 start-->
            <!--   <div id="grid"></div> -->
            <!-- 表格 end-->
         </div>
      </div>
   </div>
   </div>

   <!-- 初始隐藏 dialog内容    -->
   <div id="content" class="hide">
      <form id="form" class="jx-form form-horizontal jx-form-thin">
         <div class="row">
            <div class="control-group span15">
               <label class="control-label">排序：</label>
               <div class="controls">
                  <input type="text" class="control-text" data-rules="{required:true}">
               </div>
            </div>
         </div>
         <div class="row">
            <div class="control-group span15">
               <label class="control-label">轮播标题：</label>
               <div class="controls">
                  <input type="text" class="control-text input-xlarge" data-rules="{required:true}">
               </div>
            </div>
         </div>
         <div class="row">
            <div class="control-group span15">
               <label class="control-label">帖子编码：</label>
               <div class="controls">
                  <input type="text" class="control-text  " data-rules="{required:true}">
               </div>
            </div>
         </div>
         <div class="row">
            <div class="control-group control-row6 span12">
               <label for="" class="control-label has-note">
                    轮播图片:
                    <div class="label-note"> 图标尺寸:<br>
                        px*px
                    </div>
                </label>
               <div class="controls">
                  <input id="upload-img" type="file" class="hide">
                  <a href="#" class="btn-upload">
                        <span>上传图片</span>
                        <img src="" width="98" height="98">
                        <input name="b" type="text" data-rules="{required:true}" value="" style="display: none">
                    </a>

               </div>
            </div>
         </div>
         <div class="row">
            <div class="control-group span15">
               <label class="control-label">状态：</label>
               <div class="controls" style="line-height: 30px;">
                  <label class="checkbox">  <input name="status" value="1" type="checkbox">启用 </label>
               </div>
            </div>
         </div>
      </form>
   </div>

   <script type="text/javascript" src="../../../assets/js/jquery-1.8.1.min.js"></script>
   <script type="text/javascript" src="../../../assets/js/bui-min.js"></script>
   <script type="text/javascript" src="../../../assets/js/config-min.js"></script>
   <script type="text/javascript" src="../../../assets/js/admin.js"></script>

   <script type="text/javascript">
      BUI.use('common/page');
   </script>
   <!-- script start -->
   <script>
      BUI.use(['bui/grid', 'bui/data', 'bui/form'], function (Grid, Data, Form) {
         var Grid = Grid,
            Store = Data.Store,
            columns = [{
                  title: '排序',
                  dataIndex: 'a',
                  elCls: 'center', //居中
                  width: 100
               }, {
                  title: '轮播图片',
                  elCls: 'center',
                  dataIndex: 'b',
                  width: 150
               }, {
                  title: '轮播标题',
                  elCls: 'center',
                  dataIndex: 'c',
                  width: 100
               }, {
                  title: '管理商户',
                  elCls: 'center',
                  dataIndex: 'd',
                  width: 100
               }, {
                  title: '关联帖子',
                  elCls: 'center',
                  dataIndex: 'e',
                  width: 200
               }, {
                  title: '状态',
                  elCls: 'center',
                  dataIndex: 'f',
                  width: 100
               },
               {
                  title: '操作',
                  dataIndex: 'h',
                  elCls: 'center',
                  width: 200,
                  renderer: function (value, obj) {

                     return '<span class="grid-command btn-edit">[ 编辑 ]</span>' +
                        '<span class="grid-command btn-del">[ 删除 ]</span>' +
                        '<span class="grid-command btn-frozen">[ 禁用 ]</span>'; //页面操作不需要使用Search.createLink
                  }
               }
            ],
            data = [{
               o: '1',
               a: '1',
               b: '<img src="../../../assets/img/u9486.png">',
               c: '2017 NIKE主打新品 ',
               d: '激想体育特卖号',
               e: '帖子帖子标题',
               f: '正常',
               g: '0'
            }];

         var store = new Store({ //初始化数据
               data: data,
               pageSize: 2 // 配置分页数目
            }),
            editing = new BUI.Grid.Plugins.DialogEditing({
               contentId: 'content', //设置隐藏的Dialog内容
               autoSave: true, //添加数据或者修改数据时，自动保存
               triggerCls: 'btn-edit'
            }),
            grid = new Grid.Grid({
               render: '#grid',
               elCls: 'jx-table-thin',
               columns: columns,
               forceFit: true,
               height: 500,
               plugins: [editing],
               bbar: {
                  // pagingBar:表明包含分页栏
                  pagingBar: true
               },
               store: store
            });
         //点击操作
         grid.on('itemclick', function (ev) {
            var sender = $(ev.domTarget),
               itemEl = $(ev.element),
               item = ev.item;

            if (sender.hasClass('btn-edit')) { //点击分配操作
            } else if (sender.hasClass('btn-del')) { //点击刪除操作
               delFunction(item, itemEl);
            } else if (sender.hasClass('btn-frozen')) { //点击冻结
               FrozenFunction(item, itemEl);

            } else if (sender.hasClass('btn-unfrozen')) { //点击冻结
               UnfrozenFunction(item, itemEl);
            }

         });

         // 点击添加对图片操作
         $("#add-account-btn").click(function () {
            $(".btn-upload").find("span").css("color", "#fff").html("上传图片");
            $(".btn-upload").find("img").attr("src", "");
            addFunction();
         });
         // 点击编辑对图片操作
         $("body").on("click", ".btn-edit", function () {
            $(".btn-upload").find("img").replaceWith($(".btn-upload").find("input")
               .val());
            $(".btn-upload").find("span").css("color", "#fff").html("更改图片");
         });

         //添加记录
         function addFunction() {
            var newData = {
               b: ''
            };
            editing.add(newData, 'a'); //添加记录后，直接编辑
         }
         //没有多选插件，删除选中的记录
         function delFunction(item, itemEl) {
            BUI.Message.Confirm('确认删除该轮播吗？', function () {
               /*      $.ajax({
                   url: basePath + '/mallGoodsBrandFacade/delete',
                   dataType: 'json',
                   data: {id: item.id},
                   success: function (data) {
                       if (data.status == '0') { //删除成功
                           store.remove(item);
                       } else { //删除失败
                           BUI.Message.Alert(data.info, "error");
                           BUI.Message.Alert('删除失败！');
                       }
                   }
               });*/
            }, 'question');
         }
         //禁用选中的记录
         function FrozenFunction(item, itemEl) {

            BUI.Message.Confirm('确认禁用吗？', function () {
               //禁用

               var frozen = $(itemEl).find(".btn-frozen");
               frozen.replaceWith(
                  '<span class="grid-command btn-unfrozen">[ 启用 ]</span>'
               )
            }, 'question');
         }

         function UnfrozenFunction(item, itemEl) {

            BUI.Message.Confirm('确认启用吗？', function () {
               var unfrozen = $(itemEl).find(".btn-unfrozen");
               unfrozen.replaceWith(
                  '<span class="grid-command btn-frozen">[ 禁用 ]</span>'
               )
            }, 'question');
         }

         grid.render();


      });
   </script>
   <!-- script end -->

</body>

</html>